<template>
  <div id="app">
    <router-view />
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-icon name="chat-o" dot />
    <van-icon name="chat-o" badge="9" />
    <van-icon name="chat-o" badge="99+" />
    <van-cell title="选择单个日期" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" />
    <div class="test"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: "",
      show: false
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    }
  }
};
</script>
<style lang="less">
html,body{
  padding: 0;
  margin: 0;
}
.test {
  width: 750px;
  height: 100px;
  background: aquamarine;
}
</style>
